<template>
  <div class="mv">
<!--    可选标签区域-->
    <div class="tag_box">
      <div class="area">
        <span>地区: </span><span class="tag_item" :class="{active:currentArea === item}" v-for="(item, index) in area" @click="areaClick(item)" :key="index">{{item}}</span>
      </div>
      <div class="type">
        <span>类型: </span><span class="tag_item" :class="{active:currentType === item}" v-for="(item, index) in type" @click="typeClick(item)" :key="index">{{item}}</span>
      </div>
      <div class="order">
        <span>排序: </span><span class="tag_item" :class="{active:currentOrder === item}" v-for="(item, index) in order" @click="orderClick(item)" :key="index">{{item}}</span>
      </div>
    </div>
<!--    mv封面-->
    <div class="mv-item_box">
      <div v-for="(item, index) in mvMsg"
           :key="index"
           class="itemInfo"
      >
        <img v-lazy="item.cover" alt="" @click="goRoute(item)">
        <div class="playCount">
          <img style="width: 20px;height:20px;position: relative;top: -4px;"src="~@/assets/img/home/play-m.svg" alt="" >
          <div>{{ (item.playCount/10000).toFixed()}}</div>
          <span>万</span>
        </div>
        <div class="duration">{{item.duration | duration}}</div>
        <p>{{item.name}}</p>
        <p style="font-size: 12px;color: #a9a9bb">{{item.artistName}}</p>
      </div>
    </div>
    <!--      分页按钮-->
    <div style="width: 100%">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="28"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>

</template>

<script>
  import {video} from "@/network/video";
  import {format} from "@/components/common/utilis";

  export default {
    name: "Mv",
    data(){
      return{
        area:['全部','内地','港台','欧美','日本','韩国',],
        type:['全部','官方版','原声','现场版','网易出品',],
        order:['上升最快','最热','最新',],
        currentArea:'全部',
        currentType:'全部',
        currentOrder:'上升最快',
        mvMsg:[], //mv数据
        total:5000,  //mv总数
        currentPage:0 //当前页
      }
    },
    filters:{
      // 格式化歌曲时间
      duration(value){
        return format(value/1000)
      },
    },
    created() {
      //获取所有mv
      this.getAllMv(this.currentArea, this.currentType, this.currentOrder)
    },
    methods:{
      //点击地区
      areaClick(item){
        this.currentArea = item
        this.getAllMv(this.currentArea, this.currentType, this.currentOrder)
      },
      //点击类型
      typeClick(item){
        this.currentType = item
        this.getAllMv(this.currentArea, this.currentType, this.currentOrder)
      },
      //点击排序
      orderClick(item){
        this.currentOrder = item
        this.getAllMv(this.currentArea, this.currentType, this.currentOrder)
      },
      //跳转到mv详情页面
      goRoute(item){
        this.$router.push('/mvdetail/id=' + item.id)
      },
      //点击分页切换页数的函数
      handleCurrentChange(newPage){
        this.currentPage = newPage - 1
        this.getAllMv(this.currentArea, this.currentType, this.currentOrder,this.currentPage * 28)
        console.log(this.total);
      },

      //获取所有mv
      getAllMv(area, type, order, offset){
        video.getAllMv(area, type, order, offset).then(res => {
          this.mvMsg = res.data.data
          // this.total = res.data.count
          // console.log(res);
        })
      },
    },
  }
</script>

<style scoped>
  .mv{
    padding: 10px 0;
    overflow-y: hidden;
  }
  /*标签样式*/
  .tag_box span{
    font-size: 13px;
    display: inline-block;
    padding: 3px 8px;
    margin: 5px 8px;
    cursor: pointer;
    border-radius: 8px;
  }
  .tag_item:hover{
    color: #938de0;
  }
  .active{
    color: #b6c0c4;
    background-color: rgba(0,0,0,.05);
  }
  /*mv封面样式*/
  .mv-item_box{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-top: 20px;
  }
  .itemInfo{
    width: 21%;
    margin-bottom: 20px;
    position: relative;
  }
  .itemInfo img:nth-child(1){
    width: 100%;
    height: 135px;
    border-radius: 7px;
    cursor: pointer;
  }
  .itemInfo p{
    font-size: 14px;
    color: rgb(92, 81, 81);
    line-height: 20px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .playCount{
    position: absolute;
    top: 5px;
    right: 5%;
    display: flex;
    font-size: 12px;
    color: white;
  }
  .duration{
    position: absolute;
    right: 5%;
    top: 115px;
    font-size: 14px;
    color: #F4F4F4;
  }
  /*分页按钮样式*/
  /deep/ .el-pagination{
    width: 400px;
    margin: 0 auto;
    padding: 20px;
  }
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #e54c60;
    color: #FFF;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #6481d9;
  }

</style>
